<template>
    <div class="FullScreen" @click="openFull()">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanping"></use>
        </svg>
    </div>
</template>

<script>
export default {
	data() {
		return {
			isFull: false
		};
	},
	methods: {
		openFull() {
			var docElm = document.documentElement;
			if (!this.isFull) {
				//W3C
				if (docElm.requestFullscreen) {
					docElm.requestFullscreen();
				} else if (docElm.mozRequestFullScreen) {
					//FireFox
					docElm.mozRequestFullScreen();
				} else if (docElm.webkitRequestFullScreen) {
					//Chrome等
					docElm.webkitRequestFullScreen();
				} else if (elem.msRequestFullscreen) {
					//IE11
					elem.msRequestFullscreen();
				}
			} else {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				}
			}
			this.isFull = !this.isFull;
		}
	}
};
</script>

<style lang="scss" scoped>
.FullScreen {
	display: inline-block;
	cursor: pointer;
	margin: 0 20px;
	.icon {
		width: 26px;
		height: 26px;
		color: #ccc;
	}
}
</style>
